<template>
  <div class="dashboard-container">
    <div>
      <div class="data-list min-left">
        <div class="list-content">
          <div><span>{{$t('dashboard.myTodo')}}</span></div>
        </div>
        <div class="list-box" style="text-align: center;justify-content: center">
          <div class="list-time" @click="gos(1)">
            <p>{{$t('dashboard.dailyReport')}}</p>
            <p style="font-size: 16px;">{{dailyBacklog}}</p>
          </div>
          <div class="list-need" @click="gos(2)">
            <p>{{$t('dashboard.todo')}}</p>
            <p style="font-size: 16px;">{{unDoTaskNum}}</p>
          </div>
          <div class="list-trial" @click="gos(3)">
            <p>{{$t('dashboard.waitConfirm')}}</p>
            <p style="font-size: 16px;">{{waitConfirmNum}}</p>
          </div>
        </div>
      </div>
      <div class="data-list min-right">
        <div class="list-content">
          <div><span>{{$t('dashboard.commonFuntion')}}</span></div>
        </div>
        <div class="list-box" style="margin: 0 -20px;">
          <div class="list-time" @click="gotoTime">
            <span class="svg-container">
              <svg-icon :icon-class="firstCommonMenuIcon" style="width: 36px;height: 36px;" />
            </span>
            <p style="margin-top: 10px;">{{ firstCommonMenu }}</p>
          </div>
          <div class="list-need" @click="gotoNeed">
            <span class="svg-container">
              <svg-icon :icon-class="secondCommonMenuIcon" style="width: 36px;height: 36px;" />
            </span>
            <p style="margin-top: 10px;">{{ secondCommonMenu }}</p>
          </div>
          <div class="list-trial" @click="gotoTrial">
            <span class="svg-container">
              <svg-icon :icon-class="thirdCommonMenuIcon" style="width: 36px;height: 36px;" />
            </span>
            <p style="margin-top: 10px;">{{ thirdCommonMenu }}</p>
          </div>
        </div>
      </div>
    </div>


    <div class="data-list">
      <div class="list-content">
        <div><span>{{$t('dashboard.notice')}}</span></div>
      </div>
      <div class="list-operation">
        <el-table :empty-text="$t('placeholder.emptyText')" class="yt-table" :data="tableData" v-loading.body="listLoading" style="width: 100%" max-height="500">
          <el-table-column :label="$t('dashboard.notificationType')" align="center" class-name="pd">
            <template slot-scope="scope">
              <div>{{ config[scope.row.type] }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('notification.index.notificationTitle')" width="350px">
            <template slot-scope="scope">
              <div style="color: #0000ff;cursor: pointer;" @click="detail(scope.row)">{{ scope.row.title }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="publisher" :label="$t('dashboard.publisher')" align="center" class-name="pd"></el-table-column>
          <el-table-column prop="createTime" :label="$t('dashboard.releaseTime')" align="center" class-name="pd"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-container" style="margin-bottom: 10px;margin-top: 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import adminDashboard from './admin'
  import editorDashboard from './editor'
  import { notificationQuery } from '@/api/e-formula/notification/index'
  import { countWaitConfirm } from '@/api/management/myApplication'
  import { countCurrentUserUnDoTaskNum } from '@/api/management/stayProjectProgress';
  import { getToDoDailyReport } from '@/api/management/dailyReportManagement';

  export default {
    name: 'dashboard',
    components: { adminDashboard, editorDashboard },
    data() {
      return {
        waitConfirmNum: 0,
        unDoTaskNum: 0,
        dailyBacklog: '',
        firstCommonMenu: '',
        firstCommonMenuIcon: '',
        secondCommonMenu: '',
        secondCommonMenuIcon: '',
        thirdCommonMenu: '',
        thirdCommonMenuIcon: '',
        config: Config.I18n,
        currentRole: 'adminDashboard',
        tableData: [{
          type: '重要通知',
          createTime: '2016-05-02',
          title: '公司新OA系统正式上线使用',
          publisher: 'Freda'
        }],
        total: 0,
        listQuery: {
          page: 1,
          limit: 10,
          status: 'releaseFinish',
          groupType: this.$store.getters.info.groupType
        },
        listLoading: true
      }
    },
    computed: {
      ...mapGetters([
        'roles'
      ])
    },
    mounted() {
      // 根据字典获得菜单名称
      this.firstCommonMenu = this.$store.getters.allMapDic.commonMenu[this.$store.getters.commonMenu.firstCommonMenu]
      this.firstCommonMenuIcon = this.getIcon(this.$store.getters.commonMenu.firstCommonMenu)
      this.secondCommonMenu = this.$store.getters.allMapDic.commonMenu[this.$store.getters.commonMenu.secondCommonMenu]
      this.secondCommonMenuIcon = this.getIcon(this.$store.getters.commonMenu.secondCommonMenu)
      this.thirdCommonMenu = this.$store.getters.allMapDic.commonMenu[this.$store.getters.commonMenu.thirdCommonMenu]
      this.thirdCommonMenuIcon = this.getIcon(this.$store.getters.commonMenu.thirdCommonMenu)
  

      console.log(this.$store.getters.info.groupType, 'ddddddddddddddddd')
      this.getList();
      this.countCurrentUserUnDoTaskNum();
      this.countWaitConfirm();
      this.getToDoDailyReport()
    },
    methods: {
      // 获得菜单图片名称
      getIcon(val) {
        let icon = ''
        if (val === 'maintenance') {
          // 商机维护
          icon = 'dashboard-trial'
        } else if (val === 'dailyManager') {
          // 日报管理
          icon = 'dashboard-need'
        } else if (val === 'notificationManager') {
          // 公告管理
          icon = 'dashboard-time'
        } else if (val === 'project') {
          // 专案咨询
          icon = 'project'
        } else if (val === 'peopleManager') {
          // 人員管理
          icon = 'peopleManager'
        } else if (val === 'progressList') {
          // 工務進度列表
          icon = 'progressList'
        } else if (val === 'travelApplication') {
          // 差旅費申請
          icon = 'travelApplication'
        } else if (val === 'projectcontroll') {
          // 报表用一个icon
          icon = 'projectcontroll'
        } else if (val === 'buprogress') {
          icon = 'buprogress'
        } else if (val === 'projectreport') {
          icon = 'projectreport'
        } else if (val === 'cashflow') {
          icon = 'cashflow'
        }
        return icon
      },
      getUrl(val) {
        let url = ''
        if (val === 'maintenance') {
          // 商机维护
          url = '/demandManager/maintenance'
        } else if (val === 'dailyManager') {
          // 日报管理
          url = '/dailyManagement/myDaily'
        } else if (val === 'notificationManager') {
          // 公告管理
          url = '/baseManager/notificationManager'
        } else if (val === 'project') {
          // 专案咨询
          url = '/baseManager/project'
        } else if (val === 'peopleManager') {
          // 人員管理
          url = '/baseManager/peopleManager'
        } else if (val === 'progressList') {
          // 工務進度列表
          url = '/progressManager/progressList'
        } else if (val === 'travelApplication') {
          // 差旅費申請
          url = 'travelManagement/travelApplication'
        } else if (val === 'cashflow') {
          // 現金流報表
          url = 'pmoReport/cashFlowForm'
        } else if (val === 'projectreport') {
          // 专案收入报表
          url = 'projectRevenue/cooReport'
        } else if (val === 'buprogress') {
          // BU現況檢視表
          url = 'buInspection/buBusiness'
        } else if (val === 'projectcontroll') {
          // 專案管控表
          url = 'projectIncome/projectControl'
        }
        return url
      },
      // 第一个常用菜单
      gotoTime() {
        const url = this.getUrl(this.$store.getters.commonMenu.firstCommonMenu)
        this.$router.push({ path: url })
      },
      // 第二个常用菜单
      gotoNeed() {
        const url = this.getUrl(this.$store.getters.commonMenu.secondCommonMenu)
        this.$router.push({ path: url })
      },
      // 第三个常用菜单
      gotoTrial() {
        const url = this.getUrl(this.$store.getters.commonMenu.thirdCommonMenu)
        this.$router.push({ path: url })
      },
      gos(i) {
        if (i === 1) {
          this.$router.push({ path: '/dailyManagement/myDaily' })
        } else if (i === 2) {
          this.$router.push({ path: '/progressManager/progressList', query: { isTodo: '1' } })
        } else {
          this.$router.push({ path: '/demandManager/myApplication' })
        }
      },
      getList() {
        notificationQuery(this.listQuery).then(res => {
          this.listLoading = false;
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
        })
      },
      countWaitConfirm() {
        countWaitConfirm().then(res => {
          this.waitConfirmNum = res.data;
        })
      },
      countCurrentUserUnDoTaskNum() {
        countCurrentUserUnDoTaskNum().then(res => {
          this.unDoTaskNum = res.data;
        })
      },
      getToDoDailyReport() {
        getToDoDailyReport().then(res => {
          this.dailyBacklog = res.data;
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      detail(row) {
        this.$router.push({ path: '/baseManager/notificationManagerEdit', query: { title: 'check', id: row.id } })
      }
    },
    created() {
      if (!this.roles.includes('admin')) {
        this.currentRole = 'editorDashboard'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-container{
    padding: 0 20px;
    border-right: 1px solid #ebeef5;
    overflow-x: auto;
    font-size: 0;
    p {
      margin: 0;
      padding: 0;
    }
    .min-left{
      vertical-align: top;
      display: inline-block;
      width: calc(68% - 20px);
      height: 245px;
      font-size: 14px;
      margin-right: 20px;
      .list-box{
        padding-top: 60px;
        display: flex;
      }
      .list-time{
        display: inline-block;
        width: 222px;
        height: 80px;
        background: url('../../assets/images/dashboard-time.png') no-repeat center;
        background-size: 100%;
        color: #fff;
        margin: 0 15px;
        padding-top: 20px;
        line-height: 22px;
      }
      .list-need{
        display: inline-block;
        width: 222px;
        height: 80px;
        background: url('../../assets/images/dashboard-need.png') no-repeat center;
        background-size: 100%;
        color: #fff;
        margin: 0 15px;
        padding-top: 20px;
        line-height: 22px;
      }
      .list-trial{
        display: inline-block;
        width: 222px;
        height: 80px;
        background: url('../../assets/images/dashboard-trial.png') no-repeat center;
        background-size: 100%;
        color: #fff;
        margin: 0 15px;
        padding-top: 20px;
        line-height: 22px;
      }
    }
    .min-right{
      vertical-align: top;
      display: inline-block;
      width: 32%;
      height: 245px;
      font-size: 14px;
      .list-box{
        display: flex;
      }
      .list-time{
        padding-top: 60px;
        flex: 1;
        text-align: center;
        height: 194px;
        border-right: 1px solid #ddd;
        cursor: pointer;
      }
      .list-need{
        padding-top: 60px;
        flex: 1;
        text-align: center;
        height: 194px;
        border-right: 1px solid #ddd;
        cursor: pointer;
      }
      .list-trial{
        padding-top: 60px;
        flex: 1;
        text-align: center;
        height: 194px;
        cursor: pointer;
      }
    }
  }
  .data-list {
    margin-top: 30px;
    border: solid 1px lightgray;
    background-color: white;
    padding: 0 20px 0px;
  }
</style>
